<template>
  <div class="page-table">
    <div class="page-filter">
      <div class="query">
        <el-form ref="form" :inline="true" size="small">
          <el-form-item>
            <el-date-picker
                v-model="searchQuery.beginSearchTime"
                type="datetime"
                value-format="timestamp" format="yyyy-MM-dd HH:mm"
                placeholder="开始时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-date-picker
                v-model="searchQuery.endSearchTime"
                type="datetime"
                value-format="timestamp" format="yyyy-MM-dd HH:mm"
                placeholder="结束时间">
            </el-date-picker>
          </el-form-item>
          <el-button type="primary" plain size="small" @click="queryList()">查询
          </el-button>
        </el-form>
      </div>
      <div class="op">
        <el-button type="primary" size="mini" @click="exportExcel()">导出
        </el-button>
      </div>
    </div>
    <ad-table ref="order"
              :data="orderList" :show-summary="orderSummary" v-loading="orderInitLoading" border u-table
              :data-changes-scroll-top="orderIsScrollTop"  @table-body-scroll="orderGetMoreList"
              @row-click="orderSelectRow" @selection-change="orderSelectRows"
              :searchQuery="orderSearchQuery" @search="orderGetInitList"
              @sort-change="orderSortInitList" @filter-change="orderFilterInitList" :height="tableHeight">
      <ad-table-column label="序号" type="index" ctype="index" fixed/>
      <ad-table-column label="订单号" fixed="left" prop="orderSubNo" href="/order/detail" id="orderId" ctype="orderNo"
                       searchable/>
      <ad-table-column label="订单状态" prop="orderStatus" dictName="order_status" filterable w="4c1f"/>
      <ad-table-column label="制单人" prop="createUserName" w="3c2f" searchable sortable/>
      <ad-table-column label="制单时间" prop="createTime" ctype="datetime" sortable/>
      <ad-table-column label="客户" prop="linkmanName" w="3c2f" searchable />
      <ad-table-column label="联系方式" prop="linkmanPhone" w="3c2f" searchable />
      <ad-table-column label="收货人" prop="consigneeName" w="3c2f" searchable />
      <ad-table-column label="联系方式" prop="consigneePhone" w="3c2f" searchable />
      <ad-table-column label="出发地" prop="startCode" queryPro="startName" ctype="city" w="3c2f" searchable/>
      <ad-table-column label="目的地" prop="destinationCode" queryPro="destinationName" ctype="city" w="3c2f"
                       searchable/>
      <ad-table-column label="车辆名称" prop="carName" w="4c2f" searchable/>
      <ad-table-column label="车架号" prop="vin" ctype="vin-2f" searchable/>
      <ad-table-column label="总运费" prop="totalCollection" w="3c2f" sortable />
      <ad-table-column label="客户返款" prop="kickback" w="3c2f" sortable />
      <ad-table-column label="提车费" prop="pick" w="2c2f" sortable />
      <ad-table-column label="承运费" prop="totalTransport" w="2c2f" sortable />
      <ad-table-column label="送车费" prop="take" w="2c2f" sortable />
      <ad-table-column label="其他费用" prop="totalOther" w="3c2f" sortable />
      <ad-table-column label="税额" prop="invoiceFee" w="3c2f" sortable />
      <ad-table-column label="费用合计" prop="totalPayment" w="3c2f" sortable />
      <ad-table-column label="毛利" prop="gross" w="2c2f" sortable />
      <ad-table-column label="订单备注" prop="remark" width="200"/>

<!--      <ad-table-column label="操作" fixed="right" width="50">-->
<!--        <template v-slot="{row}">-->
<!--          <div class="op">-->
<!--            <el-button type="text" class="op-btn" @click="openOrderAdder(row)">查看</el-button>-->
<!--          </div>-->
<!--        </template>-->
<!--      </ad-table-column>-->
    </ad-table>
  </div>
</template>

<script>
  import Value from '@/components/AdValue'
  import AdTable from '@/components/AdTable'
  import AdTableColumn from '@/components/AdTable/AdTableColumn'
  import AdMonthSelect from '@/components/AdMonthSelect'
  import Date from '@/utils/datetime'
  import adTable from '@/mixins/adTable/index'
  import api, {getList as orderApiGetList} from '@/api/gross'
  import dateRange from '@/utils/dateRange'
  import {download} from '@/api/data'
  import {downloadFile} from '@/utils/index'

  export default {
    name: 'finance-gross',
    components: {Value, AdTable, AdTableColumn, AdMonthSelect},
    dicts: ['order_status'],
    mixins: [adTable('order')],
    data() {
      return {
        searchQuery: {
          beginSearchTime: dateRange.getCurrentMonth()[0].getTime(),
          endSearchTime: dateRange.getCurrentMonth()[1].getTime(),
        },
        tableHeight: document.documentElement.clientHeight - 140,
        dialogVisible: false,
        infoForm: {
          type: null,
          customerSubject: null,
          settlementUser: null,
          settlementTime: null,
          createUser: null,
          createTime: null,
          collectionFee: null,
          paymentFee: null,
          balanceFee: null,
          channel: null,
          imgList: [],
          remark: null,
        },
      }
    },
    created() {
      this.orderGetInitList()
    },
    methods: {
      orderApiGetList,
      //导出
      exportExcel() {
        let self = this;
        download(`api/finance/gross/download`, self.searchQuery).then(res => {
          downloadFile(res.data, res.headers.downloadFileName, 'xlsx')
        })
      },
      queryList: function () {
        let self = this;
        self.orderGetInitList()
      },
      search(times) {
        this.searchQuery.beginSearchTime = times.beginSearchTime
        this.searchQuery.endSearchTime = times.endSearchTime
        this.orderApiGetList()
      },
      openOrderAdder(data) {
        let self = this;
        self.dialogVisible = true;
        api.get(data.id).then(res => {
          self.infoForm = res.data;
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>